<template>
	<view>
		<view v-if="transform!='translateY(0)'" class="secret-info">
			觅镡博客由locker制作
		</view>
		<view :style="welcomeStyle" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
			<view class="reg-banner">
				<image class="reg-img" src="../../static/icons/icon.png" mode=""></image>
				<text class="reg-welcome">WELCOME!</text>
				<text class="reg-text">欢迎加入觅镡/SeekT</text>
			</view>
			<view class="avatar-container">
				<image class="reg-avatar" :src="useravatar" mode="aspectFill"></image>
				<input class="avatar-put" :placeholder="avatarname" @click="clickChooseImage" />
			</view>
			<view class="reg-container">
				<input class="reg-input" id="nickname" @input="inputGet" placeholder="请输入昵称" />
				<input class="reg-input" id="username" @input="inputGet" placeholder="请输入用户名" />
				<input class="reg-input" id="email" @input="inputGet" placeholder="请输入邮箱" />
				<view class="pwd-container">
					<input v-if="isPwd" type="password" :value="password" placeholder="请输入密码" class="reg-input"
						id="password" @input="inputGet"/>
					<input v-else type="text" :value="password" placeholder="请输入密码" class="reg-input"
						id="password" @input="inputGet" />
					<text
						:class="isPwd? 'iconfont icon-genshin_function_control_hide is-pwd':'iconfont icon-genshin_game_classify_plant2 is-pwd'"
						@click="clickSwitch"></text>
				</view>
			</view>
			<view class="reg" @click="clickRegister">
				注册
			</view>
		</view>
	</view>
</template>

<script>
	let startY = 0
	export default {
		data() {
			return {
				transform: "translateY(0)",
				transition: "",
				isPwd: true,
				username:"",
				nickname:"",
				password: "",
				email:"",
				useravatar: "../../static/icons/default_user.png",
				avatarUrl: "",
				avatarname: "请点击选择图片上传",
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: "觅镡/SeekT"
			})
		},
		computed: {
			welcomeStyle: function() {
				return {
					'transform': this.transform,
					'transition': this.transition
				}
			}
		},
		methods: {
			checkValid(){
				if(this.nickname.length==0){
					this.nickname=this.username
				}
				if(!this.$util.checkLength(this.username,6,"用户名")){
					return false
				}
				if(!this.$util.checkLength(this.password,8,"密码")){
					return false
				}
				if(!this.$util.checkLength(this.email,6,"邮箱")){
					return false
				}
				let regex=/^[A-Za-z0-9\u4e00-\u9fa5]+@[A-Za-z0-9_-]+(\.[A-Za-z0-9_-]+)+$/
				if(!regex.test(this.email)){
					uni.showToast({
						title:'电子邮箱格式不合法',
						icon:'error'
					});
					return false
				}
				if(this.avatarname=="请点击选择图片上传"||this.avatarname.length==0){
					uni.showToast({
						title:'请点击图片上传',
						icon:'error'
					});
					return false
				}
				return true
			},
			clickChooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: res => {
						//console.log(res);
						let path = res.tempFilePaths[0]
						uni.showLoading({
							title: '上传头像中',
							mask: false
						});
						let url = this.$par.host + this.$par.action_upload
						this.$req.postFile(url, "file", path, {}, res => {
							console.log(res);
							let json = JSON.parse(res.data)
							this.avatarname = json.data
							this.useravatar = this.$par.host + this.avatarname
						}, () => {
							uni.hideLoading()
						})
					}
				})
			},
			clickRegister(){
				console.log(this.nickname,this.username,this.email,this.password);
				
				if(!this.checkValid()){
					return
				}
				uni.showLoading({
					title: '提交注册',
					mask: false
				});
				let data={
					"avatar":this.avatarname,
					"email":this.email,
					"nick_name":this.nickname,
					"password":this.password,
					"user_name":this.username
				}
				let url=this.$par.host+this.$par.action_register
				this.$req.post(url,data,res=>{
					console.log(res);
					uni.showToast({
						title:res.data.message
					});
					if(!res.data.success){
						return
					}
					let app = getApp()
					let json = res.data.data
					app.globalData.avatar = json.avatar
					app.globalData.uid = json.id
					app.globalData.nickname = json.nickName
					app.globalData.username = json.userName
					app.globalData.token = json.token
					app.globalData.email = json.email
					app.globalData.type = json.type
					this.$noti.post(this.$par.notice_login_status)
					console.log(app.globalData);
					uni.navigateBack()
				},()=>{
					uni.hideLoading()
				})
				
			},
			touchStart(e) {
				startY = e.touches[0].clientY
			},
			touchMove(e) {
				let distance = e.touches[0].clientY - startY
				if (distance <= 0) {
					return
				}
				this.transform = `translateY(${distance}rpx)`
			},
			touchEnd() {
				this.transform = `translateY(0)`
				this.transition = 'transform 300ms linear'
			},
			clickSwitch() {
				this.isPwd = !this.isPwd
			},
			inputGet(e) {
				let id=e.currentTarget.id
				this[`${id}`]= e.detail.value
			},
		}
	}
</script>

<style>
	@import url("register.css");
</style>